<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="添加银行卡" title-color="#333" title-size="36">
		</u-navbar>
		<view class="explain">
			注：为了您的账户收益权益，请确保填写的银行卡信息真实有效，
			它将成为您收益提现的唯一到账银行卡账户，一经提交后不可修改。
		</view>
		<view class="layoutView">
			<view class="layoutTitle">请添加持卡人本人的银行卡</view>
			<view class="inputView">
				<text>持卡人</text>
				<input placeholder="请输入持卡人姓名" v-model="cardholder" />
			</view>
			<view class="line"></view>
			<view class="inputView">
				<text>卡号</text>
				<input placeholder="请输入银行账号" type="number" v-model="bank_card_number" />
			</view>
			<view class="line"></view>
			<view class="inputView">
				<text>开户行</text>
				<input placeholder="请输入开户银行" v-model="bank_name" />
			</view>
		</view>
		<view class="postView" @click="onPostData()">确认提交</view>
	</view>
</template>

<script>
	import toast from 'uview-ui/libs/config/props/toast';
import {addCard} from '@/api/user.js'
import { closeload, toastC, toastload } from '../../utils/common';
	export default {
		data() {
			return {
				cardholder: '',
				bank_name: '',
				bank_card_number: '',
			}
		},
		methods: {
			onPostData() {
				let self = this;
				if (!this.cardholder) {
					toast('请输入持卡人姓名');
					return
				}
				if (!this.bank_card_number) {
					toast('请输入银行账号');
					return
				}
				if (!this.bank_name) {
					toast('请选择开户银行');
					return
				}
				toastload()
				addCard({
					cardholder: this.cardholder,
					bank: this.bank_name,
					bank_card_number: this.bank_card_number
				}, true).then(res => {
					closeload()
					toastC('添加成功');
					setTimeout(function() {
						
						uni.navigateBack({
							delta: 1
						});
					}, 500);
				});
			}
		}
	}
</script>

<style>
	.explain {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	
	.layoutView {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
	}
	
	.layoutTitle {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin: 30rpx 30rpx 10rpx 30rpx;
	}
	
	.inputView {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	
	.inputView text {
		width: 120rpx;
		font-size: 28rpx;
		color: #313233;
	}
	
	.inputView input {
		flex: 1;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
	
	.line {
		height: 1px;
		background: #DFE0E6;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	
	.postView {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		height: 80rpx;
		background: #F6632D;
		border-radius: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 120rpx;
	}
	
	.nextIcon {
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
	}
	

	page {
		background: #F2F2F2;
	}
</style>
